<template>
  <div>
    <el-button
      type="primary"
      class="button-with-select"
      @click="dialogVisible = true"
    >主要按钮</el-button>

    <!-- default-expand-all 这个属性默认全打开 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="cat_id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        type="index"
        label="#"
      >
        <template slot-scope="scope">
          {{ scope.row.index }}
        </template>
      </el-table-column>
      <el-table-column
        prop="cat_name"
        label="分类名称"
      />
      <el-table-column
        prop="cat_deleted"
        label="是否有效"
      >
        <template slot-scope="scope">
          <el-button
            :type="scope.row.cat_deleted === false ? 'success' : 'danger'"
            :icon="scope.row.cat_deleted === false ? 'el-icon-check' : 'el-icon-close'"
            circle
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="cat_level"
        label="排序"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.cat_level === 0"
            size="small"
          >一级</el-tag>
          <el-tag
            v-else-if="scope.row.cat_level === 1"
            type="success"
            size="small"
          >二级</el-tag>
          <el-tag
            v-else
            type="warning"
            size="small"
          >三级</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.cat_id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="formDivision.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="formDivision.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹窗 -->
    <codity-popup
      v-if="dialogVisible"
      :dialog-visible.sync="dialogVisible"
      :current-row="currentRow"
      @delClick="currentRow = {},goodsCategories()"
    />
  </div>
</template>

<script>
import codityPopup from '../codity-popup/index.vue'
import { getGoodsCategories, deleteGoodsCategories } from '@/api/Taxonomies.js'
export default {
  components: {
    codityPopup
  },
  data() {
    return {
      tableData: [],
      // 商品页面
      formDivision: {
        // 当前页
        pagenum: 1,
        // 每页面条目个数
        pagesize: 2
      },
      // 总条数
      total: 0,
      // 弹框开闭
      dialogVisible: false,
      // 当前行的数据，用做编辑
      currentRow: {}
    }
  },

  created() {
    this.goodsCategories()
  },

  methods: {
    // 获取列表数据
    async goodsCategories() {
      const res = await getGoodsCategories(this.formDivision)
      console.log(res)
      this.total = res.total
      this.tableData = res.result
      this.tableData.forEach((item, index) => { item.index = index + 1 })
      console.log(res)
    },
    // 分页每一条·
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formDivision.pagesize = val
      this.goodsCategories()
    },
    // 当前页面
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formDivision.pagenum = val
      this.goodsCategories()
    },
    // 删除
    async handleDelete(row) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(row)
        await deleteGoodsCategories(row)
        this.goodsCategories()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改提交获取数据
    handleEdit(row) {
      console.log(row)
      this.currentRow = row
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang='scss'>
  .button-with-select {
    margin-bottom: 16px;
    margin-right: 20px;
  }
  .el-button.is-circle {
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items:center;
  }
</style>
